---
layout: single
property_name: cursor
---

<section id="cursor" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/cursor/" data-property-name="cursor" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="cursor">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/cursor" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#cursor"><span>#</span>cursor</a>
    </h2>
    <div class="property-description">
      <p>Sets the mouse cursor when hovering the element.</p>

    </div>

  </header>





    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: default;">cursor: default;</code>
        </p>
        <div class="example-description">
          <p>Sets the cursor to the element&#39;s default value. For a link, it would be a pointer. For text it would be a selection cursor.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-default"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-default{ cursor:default;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: auto;">cursor: auto;</code>
        </p>
        <div class="example-description">
          <p>auto</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-auto"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-auto{ cursor:auto;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: pointer;">cursor: pointer;</code>
        </p>
        <div class="example-description">
          <p>pointer</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-pointer"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-pointer{ cursor:pointer;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: move;">cursor: move;</code>
        </p>
        <div class="example-description">
          <p>move</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-move"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-move{ cursor:move;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: crosshair;">cursor: crosshair;</code>
        </p>
        <div class="example-description">
          <p>crosshair</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-crosshair"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-crosshair{ cursor:crosshair;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: text;">cursor: text;</code>
        </p>
        <div class="example-description">
          <p>text</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-text"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-text{ cursor:text;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: wait;">cursor: wait;</code>
        </p>
        <div class="example-description">
          <p>wait</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-wait"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-wait{ cursor:wait;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: help-resize;">cursor: help-resize;</code>
        </p>
        <div class="example-description">
          <p>help-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-help-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-help-resize{ cursor:help-resize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: ne-resize;">cursor: ne-resize;</code>
        </p>
        <div class="example-description">
          <p>ne-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-ne-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-ne-resize{ cursor:ne-resize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: nw-resize;">cursor: nw-resize;</code>
        </p>
        <div class="example-description">
          <p>nw-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-nw-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-nw-resize{ cursor:nw-resize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: n-resize;">cursor: n-resize;</code>
        </p>
        <div class="example-description">
          <p>n-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-n-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-n-resize{ cursor:n-resize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: se-resize;">cursor: se-resize;</code>
        </p>
        <div class="example-description">
          <p>se-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-se-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-se-resize{ cursor:se-resize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: sw-resize;">cursor: sw-resize;</code>
        </p>
        <div class="example-description">
          <p>sw-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-sw-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-sw-resize{ cursor:sw-resize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: s-resize;">cursor: s-resize;</code>
        </p>
        <div class="example-description">
          <p>s-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-s-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-s-resize{ cursor:s-resize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="cursor: w-resize;">cursor: w-resize;</code>
        </p>
        <div class="example-description">
          <p>w-resize</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div cursor " id="cursor-w-resize"><p>Hello world</p></div>
        </div>
      </aside>
          <style type="text/css">#cursor-w-resize{ cursor:w-resize;}</style>
    </section>

</section>
